<template>
	<view class="container">
		<view class="search">
			<image class="search_icon" src="/static/images/search.png"></image>
			<input class="search_inp" placeholder="请输入搜索店铺名" placeholder-style="color:#999" @confirm="startSearch"
				v-model="value" />
		</view>

		<scroll-view :scroll-y="true" @scroll="layoutScroll" class="scroll_list">
			<view class="container_list" v-if="store_list.length" >
				
				<view class="list_item" @tap="shop_details(item)" v-for="item in store_list" :key="item.id" >
					<view class="list_item_img">
						<image :src="item.image" mode="scaleToFill"></image>
						<!-- <u-image :src="item.image" mode="scaleToFill" :lazy-load="true"></u-image> -->
						<!-- <text v-if="item.rooms.length" >有房</text> -->
						<text v-if="item.is_room" >有房</text>
						<text v-else>無房</text>
					</view>
					<view class="list_item_info">
						<view class="info_name">{{item.name}}</view>
						<view class="info_label">
							<!-- <view>雀友麻將機</view>
							<view>雀友護腰椅</view>
							<view>帶窗戶</view>
							<view>空氣進化窗</view> -->
							<view v-for="(labelItem,index) in item.label" :key="index">{{labelItem}}</view>
						</view>
						<view class="info_address">
							<image src="/static/images/ot_2.png"></image>
							<text>{{item.address}}</text>
						</view>
						<view class="info_time">
							<image src="/static/images/shijian_o.png"></image>
							<text>營業時間：{{item.open}}-{{item.close}}</text>
						</view>
						<view class="btns">
							<view class="btns_distance">距我{{item.distance}}</view>
							<view class="btns_book" @tap.stop="book_now(item)" >立即預訂</view>
							<image src="/static/images/address.png"></image>
							<image src="/static/images/phone.png"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {storesList} from '@/api/index.js'
	export default {
		data() {
			return {
				store_list: [],
				value: "",
				lon: "",
				lat: "",
			};
		},
		onLoad(option) {
			console.log(option, "111")
			this.lon = option.lon
			this.lat = option.lat
			// uni.request({
			// 	url:this.env + `/index/stores`
			// })
		},
		watch: {
			value(n) {
				// console.log(n,"輸入")
				if (n !== "") {
					// uni.request({
					// 	url: this.env + `/index/stores?store_name=${n}&lon=${this.lon}&lat=${this.lat}`,
					// 	success: (res) => {
					// 		this.store_list = res.data.data
					// 		console.log(this.store_list, "搜索門店列表")
					// 	}
					// })
					storesList({
						store_name:n,
						lon:this.lon,
						lat:this.lat
					}).then(res=>{
						this.store_list = res.data
						console.log(res.data,'搜索')
					})
					
				}

			}
		},
		methods:{
			shop_details: function(item) {
				uni.navigateTo({
					url: `/pages/shop_details/shop_details?obj=${item.id}`
				})
			},
			book_now(item) {
				uni.navigateTo({
					url: `/pages/shop_details/shop_details?obj=${item.id}`
				})
			},
		}
	}
</script>

<style lang="less">
	.container {
		padding: 0;
		margin-top: 40rpx;
		box-sizing: border-box;

		.search {
			background: #ffffff;
			/* border: 1px solid #d2c9c9; */
			width: 90%;
			height: 88rpx;
			display: flex;
			/* justify-content: center; */
			justify-content: flex-start;
			margin: 0 auto;
			border-radius: 32rpx;
			margin-bottom: 133rpx;
			line-height: 88rpx;
			margin-left: 23%;
			margin: 27rpx auto;
			border: 1rpx solid #39B19D;

			.search_icon {
				width: 36rpx;
				height: 36rpx;
				padding: 28rpx 22rpx 22px 0rpx;
				margin-left: 17rpx;
			}

			.search_inp {
				width: 379rpx;
				height: 44rpx;
				line-height: 44rpx;
				color: #999;
				font-size: 28rpx;
				padding: 22rpx;
			}
		}

		.container_list {
			background: #fff;
			padding: 0 31rpx;
			box-sizing: border-box;
			margin-top: 45rpx;

			.list_item {
				width: 100%;
				min-height: 361rpx;
				display: flex;
				border: 1rpx solid #707070;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				padding: 24rpx 0 29rpx 13rpx;
				box-sizing: border-box;

				.list_item_img {
					// background: skyblue;
					width: 223rpx;
					height: 308rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					position: relative;
					margin-right: 19rpx;
					overflow: hidden;
					
					image {
						width: 100%;
						height: 100%;
					}
					
					/deep/ .u-image {
						width: 223rpx !important;
						height: 308rpx !important;
						border-radius: 16rpx 16rpx 16rpx 16rpx !important;
						// overflow: hidden !important;
					}
					
					/deep/ .u-image__image {
						width: 223rpx !important;
						height: 308rpx !important;
						border-radius: 16rpx 16rpx 16rpx 16rpx !important;
					}
					
					/deep/ .u-image__error {
						width: 223rpx !important;
						height: 308rpx !important;
						border-radius: 16rpx 16rpx 16rpx 16rpx !important;
					}
					
					/deep/ .u-image__loading {
						width: 223rpx !important;
						height: 308rpx !important;
						border-radius: 16rpx 16rpx 16rpx 16rpx !important;
					}

					text {
						display: inline-block;
						position: absolute;
						bottom: 0%;
						left: 0%;
						background: rgba(40, 193, 112, 0.43);
						height: 44rpx;
						width: 100%;
						border-radius: 0rpx 0rpx 16rpx 16rpx;
						color: #fff;
						text-align: center;
						line-height: 44rpx;
					}
				}

				.list_item_info {
					width: 100%;
					height: 100%;
					// flex: 1;
					position: relative;

					// background-color: palevioletred;
					.info_name {
						font-size: 28rpx;
						line-height: 40rpx;
						color: #000;
						margin-bottom: 10rpx;
					}

					.info_label {
						display: flex;
						flex-wrap: wrap;
						max-height: 208rpx;
						overflow: scroll;
						margin-bottom: 20rpx;

						view {
							padding: 5rpx 12rpx;
							box-sizing: border-box;
							color: #39B19D;
							border: 1rpx solid #39B19D;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							margin: 0 15rpx 10rpx 0;
							font-size: 20rpx;
						}
					}

					.info_address,
					.info_time {
						height: 28rpx;
						display: flex;
						align-items: center;
						margin-bottom: 15rpx;

						image {
							width: 32rpx;
							height: 32rpx;
						}

						text {
							font-size: 20rpx;
							color: #000;
						}
					}

					.btns {
						display: flex;
						align-items: center;

						// position: absolute;
						// bottom: 0;

						.btns_distance {
							color: #39B19D;
							font-size: 26rpx;
							border: 1rpx solid #39B19D;
							border-radius: 16rpx;
							// padding: 7rpx 5rpx;
							display: inline-block;
							min-width: 148rpx;
							height: 51rpx;
							line-height: 51rpx;
							text-align: center;
							margin-right: 42rpx;
							padding: 0 10rpx;
						}

						.btns_book {
							display: inline-block;
							width: 139rpx;
							height: 51rpx;
							line-height: 51rpx;
							color: #fff;
							font-size: 26rpx;
							background: #39B19D;
							border-radius: 16rpx;
							text-align: center;
							margin-right: 37rpx;
						}

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 20rpx;
						}
					}
				}
			}

		}
	}
</style>